<template>
  <el-card style="margin: 3px 8px">
    <!-- 上方搜索项 -->
    <Search
      :list="formList.list"
      @submitForm="searchPage"
      @resetForm="resetForm"
      ref="search"
    >
    </Search>
  </el-card>
  <el-card>
    <template #header>
      <h3 class="title">{{ departmentDetails!.title }}</h3>
    </template>
    <div class="btn-list">
      <el-button type="primary" @click="cliAdd">新增</el-button>
    </div>
    <el-table
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      stripe
      style="width: 100%"
      border
    >
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="roleDescrible" label="角色描述" align="center" />
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column fixed="right" label="操作" align="center" width="180">
        <template #default="scope">
          <el-button type="primary" size="small" link>分配资源</el-button>
          <el-button type="warning" size="small" link>修改</el-button>
          <el-button type="danger" size="small" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Paging
      :total="total"
      :currentPage.sync="page.mount"
      :pageSize.sync="page.size"
      @pagination="handlePageChange"
    ></Paging>
  </el-card>

  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增部门"
    width="40%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="角色名称 ">
          <el-input
            v-model="form.roleName"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述 ">
          <el-input
            v-model="form.roleDescrible"
            :rows="2"
            type="textarea"
            placeholder="请输入角色描述"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOk"> 确 认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
// 引入search 组件
import Search from "@/components/basePage/packageSearch/index.vue";
import Paging from "@/components/basePage/packagePaging/index.vue";
// 引入自定义请求库
import {
  postAction,
  putAction,
  getAction,
  deleteAction,
} from "@/utils/system/commonUse";

onMounted(() => {
  getList();
});

const props = defineProps({
  departmentDetails: {
    type: Object,
    require: true,
  },
});
// 服务器地址
const url = reactive({
  getRoleApi: "/system/sysRole/queryDataByPage",
  addRoleApi: "/system/sysRole/save",
  delRoleApi: "/system/department/delete",
});

// 加载中
const loading = ref(false);

// 条数
const total = ref(0);
const page = reactive({
  size: 10, // 长度
  mount: 1, // 页码
  departmentId: props.departmentDetails!.id,
});
// 分页器
const handlePageChange = (data: any) => {
  page.mount = data.currentPage;
  page.size = data.pageSize;
  getList();
};

// 搜索项
const formList = reactive({
  list: [
    {
      label: "表格编码",
      model: "tgNo",
      placeholder: "请输入表格编码",
    },
    {
      label: "表格名称",
      model: "tgNo51",
      placeholder: "请输入表格名称",
    },
    {
      label: "创建人",
      model: "creator",
      placeholder: "请输入创建人",
    },
  ],
});
// 可以取到子组件传递过来的数据
const searchPage = (ruleForm: any) => {
  console.log(ruleForm, "ruleForm");
  // this.getList(ruleForm);
};
// 重置表单后回调
const resetForm = () => {};

// 数据
const tableData = reactive({ list: Array() });

/**
 * 获取表格数据
 */
const getList = () => {
  loading.value = true;
  getAction(url.getRoleApi, page)
    .then((data: any) => {
      console.log("查询===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      total.value = data.data.count;
      tableData.list = data.data.data;
      loading.value = false;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
      loading.value = false;
    });
};

// 添加表单
const form = reactive({
  roleName: "",
  roleDescrible: "",
});

// 新增模态框
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  done();
};
const cliAdd = () => {
  dialogVisible.value = true;
};
/**
 * 添加角色
 */
const addOk = () => {
  postAction(
    url.addRoleApi,
    Object.assign(form, { departmentId: props.departmentDetails!.id })
  )
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      console.log("data==>", data);
      ElMessage.success("添加成功");
      getList();
      dialogVisible.value = false;
    })
    .catch((err) => {
      console.log("err==>", err);
      dialogVisible.value = false;
    });
};
</script>

<style lang="scss" scoped>
.title {
  padding: 0;
  margin: 0;
  text-align: center;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
</style>
